<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="html-box">
      <div id="userinfo">
        <div style="text-align: center; font-size: 18px;" v-if="datas.show_list.length <= 0">请设置显示板块内容</div>
        <ul v-if="datas.show_list.length > 0">
          <template v-for="(item,index) in datas.show_list">
            <li @click="goUrl(item)" :key="index" :class="!datas.direction_style || datas.direction_style == 1? 'column' : 'row'">
              <template v-if="!datas.direction_style || datas.direction_style == 1">
                <p class="num"><small>{{item.unit}}</small>{{ item.value }}</p>
                <span class="text">{{ item.name }}</span>
                <img class="love-icon" v-show="item.is_change == 1" :src="other.mark_sound && other.mark_sound.notice_img" />
              </template>
              <template v-else>
                <span class="text">{{ item.name }}</span>
                <p class="num"><small>{{item.unit}}</small>{{item.value }}</p>
              </template>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 自定义样式
const css = function () {
  if(this.datas.preview_color) {
    const {preview_color,title_color, num_color,title_size, num_size,padding_top, padding_bottom, padding_left, padding_right} = this.datas;

    return `
		    .component-${this.id} .html-box {
		        background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            padding-top: ${padding_top}px;
            padding-bottom: ${padding_bottom}px;
            padding-left: ${padding_left}px;
            padding-right: ${padding_right}px;
		    }
        .component-${this.id} .html-box .num {
            font-size: ${num_size}px;
           color: ${num_color};
        }
        .component-${this.id} .html-box .num small {
            font-size: ${num_size - 2}px;
        }
        .component-${this.id} .html-box .text {
          font-size: ${title_size}px;
          color: ${title_color};
        }
		`;
  }
};

export default {
  props: ["id", "datas", "member_item","other"],
  data() {
    return {};
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  mounted() {
  },
  methods: {
    goUrl(item) {
      let params = {};
      let query = {};
      if(item.page_data) {
        let { data_url, ...othder } = item.page_data;
        query = { ...othder };
        if(data_url) {
          query.api = data_url;
        }
      }
      if(item.url == 'cat_integral') query.name = 'cat';
      this.$router.push(this.fun.getUrl(item.url, params, query));
    },
  }
};
</script>

<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  // 默认
  .component-wrapper {
    width: 375/37.5rem;
  }

  .html-box {
    min-height: 30px;
    padding: 10px 0;
  }

  #userinfo {
    /* background: #fff; */

    /* border-top: solid 1px #ebebeb; */
    ul {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;

      li {
        flex: 1;
        margin: 5px;
        box-sizing: border-box;
        border: 0;
        text-align: center;
        display: flex;
        position: relative;
      }
      .column {
        flex-direction: column;
      }
      .row {
        margin: 0px 12px;
        align-items: center;
        .text {
          margin: 0;
        }
      }
      .love-icon {
        position: absolute;
        width:0.9375rem;
        height: 0.9375rem;
        right:0.3125rem;
        top:-0.3125rem;
        z-index:5;
      }

      li span {
        margin-bottom: 5px;
        height: 20px;
        line-height: 20px;
        // display: inline-block; //修复#93730样式问题
      }
      .row .text {
        margin-right: 5px;
      }
    }
  }
</style>
